<template>
	<view class="classification">
		<view class="nav-title" :style="navTitleStyle">全部分类</view>

		<scroll-view scroll-y="true" class="scroll-y-1" :style="fixedTop1">
			<view>
				<view class="list">
					<view class="list-item" v-for="(item,index) in classificationLeftList"
						:class="index == leftIndex ? 'active' : ''" @click="handleLeftClick(index)" :key="index">
						<view>{{item.goodsTypeName}}</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<scroll-view scroll-y="true" class="scroll-y-2" :style="fixedTop1">
			<view>
				<view class="list">
					<view class="list-item" v-for="(item,index) in classificationRightList" :key="index">
							<!-- @click="handleDetails(item)" -->
						<view class="row-1"  style="padding: 32rpx 32rpx 0 32rpx;">
							<view class="title">{{item.goodsTypeName}}</view>
							<view></view>
							<!-- <u-icon name="arrow-right" size="12" color="#878787"></u-icon> -->
						</view>
						<view class="row-2" style="padding:0 32rpx 32rpx 32rpx;">
							<view class="item" v-for="(g,f) in item.children" :key="f" @click.stop="handleDetails(g)">
								<image class="image" :src="realmName + g.goodsTypePic" mode="aspectFill"></image>
								<view class="text">{{g.goodsTypeName}}</view>
							</view>
							<view class="empty"></view>
							<view class="empty"></view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script>
	import {
		realmName
	} from "@/http";
	import {
		handleTree
	} from "@/utils/pay";
	import {
		wcGoodsTypeList
	} from "@/http";
	export default {
		data() {
			return {
				leftIndex: 0,
				rightData: [],
				realmName,
				classificationLeftList: [],
				classificationRightList: []
			}
		},
		onShow() {},
		methods: {
			async wcGoodsTypeList() {
				let res = await wcGoodsTypeList({
					status: 1
				});
				this.classificationLeftList = handleTree(res.data.rows, 'goodsTypeId', 'goodsTypeParentId');
				this.handleDailyBestNum(this.classificationLeftList);
				console.log("内容",this.classificationLeftList)
			},
			init() {
				this.wcGoodsTypeList();
			},
			handleDailyBestNum(data) {
				this.classificationLeftList = data;
				this.classificationRightList = data[0].children;
			},
			handleShoppingDetails() {
				uni.navigateTo({
					url: "/culturalCreativity/common/shoppingDetails"
				});
			},
			handleDetails(options) {
				console.log(options)
				uni.setStorageSync("PAGE_DATA", {
					fileName: "classification",
					id: options.goodsTypeId,
					title: options.goodsTypeName
				});
				uni.navigateTo({
					url: "/culturalCreativity/classification/detailsList?goodsTypeId=" + options.goodsTypeId
				});
			},
			handleLeftClick(e) {
				this.leftIndex = e;
				this.classificationRightList = this.classificationLeftList[e].children || [];
				// this.weChartList(this.classificationLeftList[e].goodsTypeName)
			},
			// async weChartList(goodsTypeName) {
			// 	let res = await weChartList({goodsTypeName: goodsTypeName});
			// 	// this.classificationLeftList = res.data.rows
			// 	console.log('11111：', res.data.rows);
			// 	// this.listData = res.data.rows;
			// },
		},
		computed: {
			fixedTop1() {
				let res = wx.getMenuButtonBoundingClientRect();
				return `top:${res.top + res.height + 20}px;`
			},
			navTitleStyle() {
				let res = wx.getMenuButtonBoundingClientRect();
				return `padding-top:${res.top}px;height:${res.height}px;line-height:${res.height}px;`
			}
		}
	}
</script>
<style lang="scss" scoped>
	.scroll-y-2,
	.scroll-y-1 {
		position: fixed;
		top: calc(126rpx + 34rpx);
		background-color: rgba(247, 247, 247, 1);
	}

	.scroll-y-1 {
		width: 250rpx;
		bottom: calc(50px + env(safe-area-inset-bottom));

		.list {
			display: flex;
			flex-direction: column;
			align-items: center;

			.list-item {
				position: relative;
				color: #5A5A5A;
				font-size: 28rpx;

				&+.list-item {
					margin-top: 80rpx;
				}

				&.active {
					font-weight: bold;
					font-size: 32rpx;
					color: #1F1F1F;

					&::after {
						content: "";
						position: absolute;
						left: 50%;
						bottom: -10rpx;
						transform: translate(-50%, 0);
						width: 68rpx;
						height: 6rpx;
						background: #FD8F19;
						border-radius: 8rpx;
					}
				}
			}

		}
	}

	.scroll-y-2 {
		left: 250rpx;
		right: 0;
		bottom: calc(50px + env(safe-area-inset-bottom));

		.list {
			padding-bottom: 100rpx;

			.list-item {
				background: #FFFFFF;
				border-radius: 30rpx 0rpx 0rpx 30rpx;
				// padding: 32rpx;
				width: 494rpx;
				box-sizing: border-box;

				&+.list-item {
					margin-top: 24rpx;
				}

				.row-1 {
					display: flex;
					justify-content: space-between;

					.title {
						font-size: 28rpx;
						font-weight: 500;
						color: #1F1F1F;
					}
				}

				.row-2 {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					$width: 120rpx;

					.empty {
						width: $width;
					}

					.item {
						margin-top: 32rpx;

						.image {
							display: block;
							width: $width;
							height: 120rpx;
							border-radius: 16rpx;
						}

						.text {
							display: -webkit-box;
							overflow: hidden;
							white-space: normal !important;
							text-overflow: ellipsis;
							word-wrap: break-word;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;

							width: $width;
							text-align: center;
							margin-top: 24rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: #878787;
						}
					}
				}
			}
		}
	}

	.nav-title {
		position: fixed;
		z-index: 1;
		left: 0;
		right: 0;
		text-align: center;
		font-weight: 500;
		color: rgba(31, 31, 31, 1);
		top: 0;
		padding-bottom: 12rpx;
		font-size: 36rpx;
		background: #FFFFFF;
	}

	.classification::after {
		content: "";
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: -1;
		background-color: #F7F7F7;
	}
</style>
